<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="../css/common.css" />
<script src="../js/common/jquery.js"></script>
<script src="../js/common/drag.js"></script>
<script src="../js/common/angular.min.js"></script>
<script type="text/javascript" src="../js/common/common.js"></script>
<script type="text/javascript" src="../js/select.js"></script>
</head>
<body ng-app="myApp">

<div class="dqwz">
    <span>当前位置：</span>
    <span>AngularJS 选择框</span>
</div>

<section>
    <div ng-controller="optionsCtrl">
        <h3>【创建下拉框(数组)】</h3>
        <select ng-model="selectedName" ng-options="x for x in names">
        </select>
        <!-- 查看源码开始 -->
        <div class="htmlCode">
            <span>【html源码】</span>
            <xmp ng-non-bindable>
<select ng-model="selectedName" ng-options="x for x in names">
</select>
            </xmp>
            <span>【js源码】</span>
            <xmp>
app.controller('optionsCtrl',function($scope){
    $scope.names = ['小小','大大','老老'];
    $scope.selectedName = $scope.names[0];
})
            </xmp>
            <span class="close"><a href="javascript:;">关闭</a></span>
        </div>
        <div class="viewCode">
            <span><a href="javascript:;"> >>查看源码</a></span>
        </div>
        <!-- 查看源码结束 -->
    </div>

    <div ng-controller="optionsSiteCtrl">
        <h3>【创建下拉框(对象)】</h3>
        <select ng-model="selectSite" ng-options="x.site for x in sites">
        </select><br/>
        <span>导航名字：{{selectSite.site}}</span><br/>
        <span>链接地址：{{selectSite.url}}</span>
        <!-- 查看源码开始 -->
        <div class="htmlCode">
            <span>【html源码】</span>
            <xmp ng-non-bindable>
<select ng-model="selectSite" ng-options="x.site for x in sites">
</select><br/>
<span>导航名字：{{selectSite.site}}</span><br/>
<span>链接地址：{{selectSite.url}}</span>
            </xmp>
            <span>【js源码】</span>
            <xmp>
app.controller('optionsSiteCtrl',function($scope){
    $scope.sites = [
        {site:'百度',url:'http://www.baidu.com'},
        {site:'优酷',url:'http://www.youku.com'},
        {site:'土豆',url:'http://www.tudou.com'}
    ];
    $scope.selectSite = $scope.sites[0];
})
            </xmp>
            <span class="close"><a href="javascript:;">关闭</a></span>
        </div>
        <div class="viewCode">
            <span><a href="javascript:;"> >>查看源码</a></span>
        </div>
        <!-- 查看源码结束 -->
    </div>

    <div ng-controller="optionsDataCtrl">
        <h3>【创建下拉框(数据源为对象)】</h3>
        <select ng-model="selectData" ng-options="x for (x,y) in sites">
        </select><br/>
        <span>导航名字：{{selectData}}</span>
        <!-- 查看源码开始 -->
        <div class="htmlCode">
            <span>【html源码】</span>
            <xmp ng-non-bindable>
<select ng-model="selectData" ng-options="x for (x,y) in sites">
</select><br/>
<span>导航名字：{{selectData}}</span>
            </xmp>
            <span>【js源码】</span>
            <xmp>
app.controller('optionsDataCtrl',function($scope){
    $scope.sites = {
        site1:'菜单一',
        site2:'菜单二',
        site3:'菜单三',
    }
    $scope.selectData = $scope.sites.site1;
})
            </xmp>
            <span class="close"><a href="javascript:;">关闭</a></span>
        </div>
        <div class="viewCode">
            <span><a href="javascript:;"> >>查看源码</a></span>
        </div>
        <!-- 查看源码结束 -->
    </div>

    <div ng-controller="optionsData2Ctrl">
        <h3>【创建下拉框(数据源为对象,value为对象)】</h3>
        <select ng-model="selectData2" ng-options="x for (x,y) in sites">
        </select><br/>
        <span>导航名字：{{selectData2.site}}</span><br/>
        <span>链接地址：{{selectData2.url}}</span>
        <!-- 查看源码开始 -->
        <div class="htmlCode">
            <span>【html源码】</span>
            <xmp ng-non-bindable>
<select ng-model="selectData2" ng-options="x for (x,y) in sites">
</select><br/>
<span>导航名字：{{selectData2.site}}</span><br/>
<span>链接地址：{{selectData2.url}}</span>
            </xmp>
            <span>【js源码】</span>
            <xmp>
app.controller('optionsData2Ctrl',function($scope){
    $scope.sites = {
        site1:{site:'百度',url:'http://www.baidu.com'},
        site2:{site:'优酷',url:'http://www.youku.com'},
        site3:{site:'土豆',url:'http://www.tudou.com'},
    }
    $scope.selectData2 = $scope.sites.site1;
})
            </xmp>
            <span class="close"><a href="javascript:;">关闭</a></span>
        </div>
        <div class="viewCode">
            <span><a href="javascript:;"> >>查看源码</a></span>
        </div>
        <!-- 查看源码结束 -->
    </div>
</section>

<div class="mask_layer">
</div>

</body>
</html>